<template>
	<div  :id='uuid' :class="['echarts',!isFull?'':'landscape']" :style="!isFull?{width:width,height:height + 'rem'}:''"></div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		props: ['isFull', 'optiondata','uuid','width','height'],
		data() {
			return {
			myChart: null, // 图表需要字段
			option: null
			}
		},
		methods: {
			echarts() {
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById(this.uuid));

				// 指定图表的配置项和数据
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(this.optiondata);
			},
			resize() {
				this.myChart.resize() // 窗口大小发生变化的时候重置
			},
		},
		destroyed() {
			// 移除监听，echarts自适应
			window.removeEventListener('resize', this.resize)
		},
		mounted() {
			// echarts图表自适应
			window.addEventListener('resize', this.resize); // 添加监听
			this.echarts();
		},
		watch: {
			isFull: {
				handler() {
					//监听当屏幕发生转变时，重新渲染echarts
					if (this.myChart) {
						this.$nextTick(() => this.resize())
						console.log(this.optiondata)
						this.myChart.setOption(this.optiondata, true);
					}
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.echarts {
		margin: auto;
	}

	.landscape {
		width: 100vh;
		height: 100vw;
		font-size: .4rem;
	}
</style>
